import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { trainapi } from '../../request/api'
import { Collapse } from 'antd-mobile'
import { CalendarOutline } from 'antd-mobile-icons'
import { InfiniteScroll, List, NavBar, Switch, Ellipsis } from 'antd-mobile'
// 引入高阶导航首位
import Hoc_login from '../../utils/Hoc_login'
function Index() {
  let nav = useNavigate()
  let [xq] = useSearchParams()
  let start = xq.get('start')
  let end = xq.get('end')
  let date = xq.get('date')
  // 是否高铁
  let [isSpeed, setisSpeed] = useState(xq.get('isSpeed'))
  // 是否有票
  let [isSeat, setisSeat] = useState(false)
  // 升序降序
  let [isDesc, setisDesc] = useState(false)
  let [list, setlist] = useState([])
  let [page, setpage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  // console.log('start',start)
  // 列表数据请求
  let fun = () => {
    trainapi({ start, end, date, isSpeed, isSeat, isDesc, page }).then(res => {
      console.log('lb', res)
      if (res.data.code == 200) {
        setlist([...list, ...res.data.data])
        setpage(pre => pre + 1)
      }
      if (res.data.data.length == 0) {
        setHasMore(false)
      }
    })
  }
  useEffect(() => {
    fun()
  }, [])
  // 使用 WebSocket 或长轮询技术实时获取最新数据并更新页面。
// 点击跳转详情
let todetail=(item)=>{
  nav('/detail',{
    state:item
  })
}
  return (
    <div>
      <NavBar style={{ background: '#302f2fff', color: '#fff' }} onBack={() => nav(-1)} left={<div>{start}-{end}</div>}></NavBar>
      {/* 车票 */}
      <div  style={{ background: '#302f2fff', color: '#fff',display:'flex',
        justifyContent:'space-between',height:'60px',alignItems:'center' ,padding:'0 18px'}}>
        <span>前一天</span>
         <span style={{padding:'5px 10px',background:'#fff',color:'#000',borderRadius:'5px'}}><CalendarOutline />{date}</span>
          <span>后一天</span>
      </div>
      <div style={{ background: '#eee' }}>
        <div style={{ height: '65vh', overflow: 'auto' }}>
          <div >
            {
              list.length > 0 && list.map((item, index) => {
                return <div onClick={()=>todetail(item)} style={{ display: 'flex', margin: '10px 0', background: '#fff', padding: '10px' }} key={index}>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '5px', flex: 1 }}>
                    <span>{item.startTime}</span>
                    <span style={{ borderBottom: '1px solid #ccc', fontSize: '12px', color: '#ccc', textAlign: 'center' }}>D3212</span>
                    <span>{item.startTime}</span>
                    <span>{start}</span>
                    <span style={{ fontSize: '12px', color: '#ccc', textAlign: 'center' }}>1h 12m</span>
                    <span>{end}</span>
                    <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>二等座 <span> 有票</span></span>
                    <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>一等座<span> 有票</span></span>
                    <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>特等座<span> 有票</span></span>
                  </div>
                  {/* 价格 */}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <p><span style={{ fontSize: '16px' }}>{`￥${item.tick.secondTick}`}</span>起</p>
                  </div>
                </div>
              })
            }
            {/* 无线滚动 */}
            <InfiniteScroll loadMore={fun} hasMore={hasMore} />
          </div>
        </div>
       
        {/* 展开收起实现滑动展开收起的动画 */}
        <Collapse >
          <Collapse.Panel style={{background:'#eee',fontSize:'12px'}} key='1' title='以下为普通列车' arrowIcon={'收起'}>
             <div >
              {
                list.length > 0 && list.map((item, index) => {
                  return <div style={{ display: 'flex', margin: '10px 0', background: '#fff', padding: '10px' }} key={index}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '5px', flex: 1 }}>
                      <span>{item.startTime}</span>
                      <span style={{ borderBottom: '1px solid #ccc', fontSize: '12px', color: '#ccc', textAlign: 'center' }}>D3212</span>
                      <span>{item.startTime}</span>
                      <span>{start}</span>
                      <span style={{ fontSize: '12px', color: '#ccc', textAlign: 'center' }}>1h 12m</span>
                      <span>{end}</span>
                      <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>二等座 <span> 有票</span></span>
                      <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>一等座<span> 有票</span></span>
                      <span style={{ fontSize: '12px', color: '#b5b5b5ff' }}>特等座<span> 有票</span></span>
                    </div>
                    {/* 价格 */}
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <p><span style={{ fontSize: '16px' }}>{`￥${item.tick.secondTick}`}</span>起</p>
                    </div>
                  </div>
                })
              }
              {/* 无线滚动 */}
              <InfiniteScroll loadMore={fun} hasMore={hasMore} />
            </div>
          </Collapse.Panel>
          
        </Collapse>
        {/* -------------------------------------------- */}
       
      </div>
      {/* 筛选 */}
      <div style={{
        display: 'flex', position: 'fixed',background:'#fff',
        justifyContent: 'space-between', bottom: '0', height: '40px', lineHeight: '40px', width: '100vw'
      }}>
        <div>
          <Switch defaultChecked={isSpeed == 'false' ? false : true} onChange={(val) => {
            setisSpeed(val)
            setpage(1)
            setlist([])

          }}></Switch>筛选
        </div>
        <div>
          <Switch defaultChecked={isSeat} onChange={(val) => {
            setisSeat(val)
            setpage(1)
            setlist([])

          }}></Switch>出发时间
        </div>
        <div>
          <Switch defaultChecked={isDesc} onChange={(val) => {
            setisDesc(val)
            setpage(1)
            setlist([])

          }}></Switch>旅行耗程
        </div>
      </div>

    </div>
  )
}

export default Hoc_login(Index)
